<template>
  <div class="header">
    <img class="logo" src="@/assets/logo.png" width="50px" />
    <el-dropdown class="icon" @command="handleCommand">
      <span class="el-dropdown-link">
       <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">个人中心</el-dropdown-item>
        <el-dropdown-item command="b">退出系统</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { logout } from "@/api/login";
import passwordApi from "@/api/password";

export default {
  data() {
    // 在return 上面进行申明自定校验
    const validateOldPass = (rule, value, callback) => {
      // console.log(this.user.id)
      passwordApi.checkPwd(this.user.id, value).then((response) => {
        const resp = response.data;
        if (resp.flag) {
          // 验证通过
          callback();
        } else {
          callback(new Error(resp.message));
        }
      });
    };

    // 校验确认密码是否一致
    const validatePass = (rule, value, callback) => {
      // value 代表 checkPass
      if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        // 相等,则通过
        callback();
      }
    };

    // 注意:在 return 上面,而上面不能使用 逗号 , 结束
    return {
      user: JSON.parse(localStorage.getItem("login-user")),
      dialogFormVisible: false,
      ruleForm: {
        oldPass: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        oldPass: [
          { required: true, message: "原密码不能为空", trigger: "blur" },
          { validator: validateOldPass, trigger: "blur" },
        ],
        pass: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
        checkPass: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: validatePass, trigger: "change" },
        ],
      },
    };
  },

  methods: {
        handleCommand(command) {
            switch (command) {
                case 'a':
                    // 打开修改密码窗口
                    this.handlePwd()
                    break;
                case 'b':
                    // 退出系统
                    this.handleLogout()
                    break;
                default:
                    break;
            }
        },

        // 退出系统
        handleLogout() {
          console.log("点击了退出");
            this.$store.dispatch('Logout').then(response => {
                if(response.flag) {
                    // 退出成功
                    // 回到登录页面
                    this.$router.push('/login')
                }else {
                    this.$message({
                        message: resp.msg,
                        type: 'warning',
                        duration: 500 // 弹出停留时间
                    });
                }
            })
            
        },

        // 打开修改密码窗口
        handlePwd(){
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['ruleForm'].resetFields()
            })
        },
        // 修改密码
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if(valid) {
                   console.log('校验成功')  
                   passwordApi.updatePwd(this.user.id, this.ruleForm.checkPass).then(response => {
                       const resp = response.data
                       // 不管失败还是成功,都进行提醒
                       this.$message({
                           message: resp.message,
                           type: resp.flag ? 'success': 'warning'
                       })
3
                       if(resp.flag) {
                           // 更新成功, 退出系统,回到登录页面
                           this.handleLogout()
                           // 关闭窗口
                           this.dialogFormVisible = false
                       }
                   })  
                }else {
                    return false
                }
            })
        }
    }
}
</script>

<style scoped>
.logo {
  vertical-align: middle;
  padding: 0px 10px 0 40px;
}
.company {
  position: absolute;
  color: white;
}

/* 下拉菜单  */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

/* 头像的布局 */
.icon {
    float: right;
    margin-right: 20px;
}
</style>